<template>
  <div>
    <!-- 面包屑指引 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索  clearable 是否可清空 @clear清空事件-->
    <el-input
      placeholder="请输入内容"
      v-model="parceinfo.query"
      clearable
      @clear="orderss"
    >
      <el-button
        slot="append"
        icon="el-icon-search"
        @click="orderss"
      ></el-button>
    </el-input>
    <!-- 渲染页面 -->
    <el-table :data="parceuser" border style="width: 100%" id="andss">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="order_id" label="订单ID"> </el-table-column>
      <el-table-column prop="order_number" label="订单编号"> </el-table-column>
      <el-table-column prop="order_price" label="价格" width="180px">
      </el-table-column>
      <el-table-column prop="pay_status" label="是否付款" width="180px">
        <!-- 利用插槽来访问子元素里边的值，使其状态改变 -->
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.pay_status === '1'"
            >已付款</el-tag
          >
          <el-tag type="danger" v-else>未付款</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货" width="180px">
      </el-table-column>
      <!-- 利用时间戳格式化，获取当前下单时间 -->
      <el-table-column prop="create_time" label="下单时间" width="200">
        <!-- 格式化时间 -->
        <template slot-scope="scope">
          {{ scope.row.create_time | newFromTime }}
        </template>
      </el-table-column>
      
      <!-- 操作 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 编辑订单 -->
          <el-button type="warning" size="mini" @click="bianji(scope.row)">
            <i class="el-icon-female"></i>
            编辑订单</el-button
          >
          <!-- 查找订单 -->
          <el-button type="primary" size="mini" @click="seek(scope.row)">
            <i class="el-icon-ice-cream-round"></i>
            查看订单</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 分页订单数据 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="parceinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 编辑订单弹出框 -->
    <el-dialog title="编辑订单" :visible.sync="dialogFormssVisible">
      <el-form :model="putparce">
        <el-form-item label="订单id">
          <el-input
            v-model="putparce.order_id"
            autocomplete="off"
            type="number"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单价格">
          <el-input
            v-model="putparce.order_price"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-input
            v-model="putparce.pay_status"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单是否发货">
          <el-input
            v-model="putparce.is_send"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-input
            v-model="putparce.create_time"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormssVisible = false">取 消</el-button>
        <el-button type="primary" @click="givesput">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 查看订单弹出框 -->
    <el-dialog title="查看订单" :visible.sync="dialogFormfimdVisible">             
      <el-form :model="findput">
        <el-form-item label="订单id">
          <el-input
            v-model="findput.order_id"
            autocomplete="off"
            type="number"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单价格">
          <el-input
            v-model="findput.order_price"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-input
            v-model="findput.pay_status"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单是否发货">
          <el-input
            v-model="findput.is_send"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
        <el-form-item label="下单时间">
          <el-input
            v-model="findput.create_time"
            autocomplete="off"
            :disabled="true"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //获取数据的一个储存
      parceuser: [],
      //获取数据以及分页
      parceinfo: {
        query: "", //查询参数，就是关键字
        pagenum: 1, //默认显示的页数，在第一页
        pagesize: 10, //默认显示的条数
      },
      total: 0, //总数量
      //编辑订单
      dialogFormssVisible: false, //关闭弹窗
      putparce: {},
      //查看订单
      dialogFormfimdVisible: false,
      findput: {},
    };
  },
  methods: {
    // 查看订单
    seek(userinfo) {
      this.dialogFormfimdVisible = true;
      this.findput = userinfo;
    },

    //   编辑订单
    async givesput() {
      let { data } = await this.$req.put(
        "orders/" + this.putparce.order_id,
        this.putparce
      );
      console.log(data);
      //判断状态
      if (data.meta.status == 201) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.dialogFormssVisible = false;
        this.orderss();
      } else {
        this.$message.error(data.meta.msg);
      }
    },

    //点击按钮编辑订单获取数据
    bianji(userinfo) {
      this.dialogFormssVisible = true;
      this.putparce = userinfo;
    },

    // 设置每页的页数
    handleCurrentChange(pagenum) {
      this.parceinfo.pagenum = pagenum;
      this.orderss();
    },

    // 页面跳转分页的条数
    handleSizeChange(pagesize) {
      this.parceinfo.pagesize = pagesize;
      this.orderss();
    },

    //   获取订单数据
    async orderss() {
      let { data } = await this.$req.get("orders", { params: this.parceinfo });
      console.log(data);
      if (data.meta.status == 200) {
        this.$message({
          type: "success",
          message: data.meta.msg,
        });
        this.parceuser = data.data.goods;
        this.total = data.data.total;
      } else {
        this.$message.error(data.meta.msg);
      }
    },
  },
  mounted() {
    //调用函数
    this.orderss();
  },
};
</script>

<style>
</style>